import React, { useContext, useState } from "react";
import { View, Text } from "@tarojs/components";
import Taro, { useDidShow, getCurrentInstance } from "@tarojs/taro";
import dayjs from "dayjs";
import "taro-ui/dist/style/components/button.scss"; // 按需引入

import { CommonContext, setTabBar } from "../../store";
import DshCalendar from "../../components/dsh-calendar";
import api from "../../api/api";
import { times, minutes, handelEvents, getColor } from "./helper";

import "./index.less";

export default () => {
  const [currentDate, setCurrentDate] = useState(new Date());
  const [diagnosisSchemesId, setDiagnosisSchemesId] = useState(""); //方案id
  const [eventsTimes, setEventsTimes] = useState([]);
  const [state, dispatch] = useContext(CommonContext);

  useDidShow(() => {
    dispatch(setTabBar("日程"));
    syncSchedules();
    const { diagnosisSchemesId } = getCurrentInstance().router.params;
    diagnosisSchemesId && setDiagnosisSchemesId(diagnosisSchemesId);
  });

  const onSelectDate = (val) => {
    setCurrentDate(val);
    syncSchedules(dayjs(val).format("YYYY-MM-DD"));
  };

  // 获取日程
  const syncSchedules = async (
    date = dayjs(currentDate).format("YYYY-MM-DD")
  ) => {
    const { data } = await api.getSchedules({ todayDate: date });
    const events = data.map((item) => {
      return {
        id: item.id,
        start: item.todayDate + " " + item.startTime,
        end: item.todayDate + " " + item.endTime,
        color: getColor(),
        info: {
          name:
            item.patientDTO?.name +
            " " +
            item.patientDTO?.gender +
            item.patientDTO?.age,
          num: 1,
        },
      };
    });
    const res = await handelEvents(events);
    setEventsTimes(res);
  };

  // 跳转编辑
  const touchMin = (dateTime, id) => {
    if (dayjs(dateTime).hour() > 8) {
      Taro.navigateTo({
        url: `/pages/addEvent/index?id=${
          id ? id.id : ""
        }&dateTime=${dateTime}&diagnosisSchemesId=${diagnosisSchemesId}`,
      });
    }
  };

  return (
    <View className="bgBox">
      <DshCalendar currentDate={currentDate} onSelectDate={onSelectDate} />
      <View className="times">
        {times.map((hour, index) => {
          return (
            <View className="time" key={index}>
              {minutes.map((min, index1) => {
                const date = dayjs(currentDate).format("YYYY-MM-DD");
                const time = hour + ":" + min;
                const dateTime = date + " " + time;
                const piPeiIndex = eventsTimes
                  .map((item) => item.t)
                  .indexOf(dateTime);
                const piPeiItem = eventsTimes[piPeiIndex];
                const havedEvent = piPeiIndex > -1;
                if (hour === "18") {
                  if (min === "00") {
                    return (
                      <View
                        className="min"
                        key={index1}
                        onClick={() => {
                          touchMin(dateTime, piPeiItem.id);
                        }}
                      >
                        <View
                          className="mian-content"
                          style={{
                            // backgroundColor: havedEvent
                            //   ? piPeiItem.color
                            //   : "transparent",
                            ...piPeiItem?.color,
                          }}
                        >
                          {piPeiItem?.info && (
                            <View className="info">
                              <Text className="name">
                                {piPeiItem.info.name}
                              </Text>
                              {/* <Text className="num">
                                第{piPeiItem.info.num}次就诊
                              </Text> */}
                            </View>
                          )}
                        </View>
                        <View className="title">
                          {hour}:{min}
                        </View>
                      </View>
                    );
                  }
                } else {
                  return (
                    <View
                      className="min"
                      onClick={() => {
                        touchMin(dateTime, piPeiItem);
                      }}
                    >
                      <View
                        className="mian-content"
                        style={{
                          // backgroundColor: havedEvent
                          //   ? piPeiItem.color
                          //   : "transparent",
                          ...piPeiItem?.color,
                        }}
                      >
                        {piPeiItem?.info && (
                          <View className="info">
                            <Text className="status">
                              {piPeiItem.info.status}
                            </Text>
                            <Text className="name">{piPeiItem.info.name}</Text>
                            {/* <Text className="num">
                              第{piPeiItem.info.num}次就诊
                            </Text> */}
                          </View>
                        )}
                      </View>
                      <View
                        className="title"
                        style={{ opacity: min === "00" ? "1" : "0" }}
                      >
                        {hour}:{min}
                      </View>
                    </View>
                  );
                }
              })}
            </View>
          );
        })}
      </View>
    </View>
  );
};
